<template>
  <div id="user">
    <el-popover
      placement="bottom"
      :width="170"
      trigger="hover"
    >
      <template #reference>
        <div class="login">
          <img :src="baseURL+adminInfo.phone+'?stamp='+stamp" alt="">
          <span>{{adminInfo.name}}</span>
        </div>
      </template>
      <div class="show">
        <el-button type="success" size="small" @click="altInfo">修改信息</el-button>
         <el-button type="danger" size="small" @click="open">退出登录</el-button>
      </div>
    </el-popover>
  </div>
</template>
 
<script>
import {mapState,mapMutations} from "vuex"
export default {
  name: 'User',
  data(){
    return{
      stamp:Date.now()
    }
  },
  methods:{
    ...mapMutations(['exitAdminInfo',"updateAdminInfo"]),
    // 退出登录
    async exit(){
      let {data} = await this.$axios.post("/admin/administrators/exit")
      if(data.code) return this.$message.warning(data.mes)
      window.location.reload()
      this.$message.success(data.mes)
    },
    // 打开提示框
    open() {
      this.$confirm('确认退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(async () => {
        await this.exit()
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登录',
        })
      })
    },
    // 修改信息
    altInfo(){
      this.$router.push("/user/information")
    }
  },
  computed:{
    ...mapState(['adminInfo'])
  },
  mounted(){
  },
  watch:{
    // 监听用户变化
    adminInfo(){
      this.stamp = Date.now()
    }
  }
}
</script>

<style scoped lang='less'>
#user{
  width: 170px;
  height: 60px;
  display: flex;
  align-items: center;
  margin-right: 20px;
  .login{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;
  }
  img{
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%;
  }
  span{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    color:#fff;
  }
}
</style>